// 放大镜区域
class Magnify {
    constructor() {

    }
    setimg() {
        $(".goods_img li").click(function () {
            let src = $(this).children().attr("src")
            $(".small_box").children().attr("src", `${src}`)
            $(this).addClass("curn").siblings().removeClass("curn")
        })
    }
    boxshow() {
        $(".small_box").mouseenter(function () {
            let src = $(this).children().attr("src")
            $(".bigBox").show()
            $(".bigBox").css({
                'background': `url(${src}) no-repeat`,
                'backgroundSize': `800px,800px`
            });
            $(".box").show()
        }).mouseleave(function () {
            $(".bigBox").hide();
            $(".box").hide()
        })

    }
    movebox() {
        $(document).mousemove(function (e) {
            let x = e.pageX
            let y = e.pageY
            let xx = $(".small_box").offset().left
            let yy = $(".small_box").offset().top
            x = x - xx - $(".box").width() / 2;
            y = y - yy - $(".box").height() / 2
            let max = $(".small_box").width() - $(".box").width()
            let may = $(".small_box").height() - $(".box").height()
            if (x > max) {
                x = max
            } else if (x < 0) {
                x = 0
            }
            if (y > may) {
                y = may
            } else if (y < 0) {
                y = 0
            }
            $(".box").css({
                left: `${x}px`,
                top: `${y}px`
            })
            let big_x = x * $(".bigBox").width() / $(".box").width()
            let big_y = y * $(".bigBox").height() / $(".box").height()
            $(".bigBox").css({
                backgroundPosition: `${-big_x}px ${-big_y}px`
            })
        })
    }

    evenbild() {
        this.setimg()
        this.boxshow()
        this.movebox()
    }
}

let fd = new Magnify();
fd.evenbild()


